﻿<!DOCTYPE html>
<html>
<head lang="zh_CN">
    <meta charset="utf-8">
    <title>前端练习css</title>
    <!-- 外链式 -->
    <link rel="stylesheet" type="text/css" href="css/前端练习css.css">
    <!-- 链入式 -->
    <style type="text/css">
        /*1.选择器类型*/
        /*标签选择器*/
        /*类选择器*/
        .red {
            color: red;
            font-weight: 400;
            /*font-weight:normal;*/
        }

        .font {
            /*字号*/
            font-size: 40px;
            /*字体粗细，实际开发中更使用数字,bold和700为加粗，400和normal为不加粗*/
            /*font-weight: bold;*/
            font-weight: 700;
        }
        /*id选择器*/
        #blue {
            color: blue;
        }
        /*通配符选择器*/
        body {
            /*字体*/
            font-family: "微软雅黑";
        }
        /*2.字体样式：将文字变倾斜 加粗 字号为16像素 字体为微软雅黑*/
        .lianxi1 {
            font-style: italic;
            /*italic是倾斜，不倾斜是normal，开发中做常用normal*/
            font-weight: 700;
            font-size: 16px;
            font-family: "微软雅黑";
        }
        /*可以用复合属性：简写方式 节约代码。格式如下：
          font:font-style font-weight font-size/line-height font-family;
          font-size和font-family不能省，其它可省
        */
        .lianxi2 {
            font: italic 700 16px '微软雅黑';
        }
        /*3.文本样式*/
        .lianxi3 {
            /*让盒子里的文字水平居中对齐*/
            text-align: center;
        }

        .lianxi4 {
            /*下划线*/
            text-decoration: underline;
        }

        .lianxi5 {
            /*删除线*/
            text-decoration: line-through;
        }

        a {
            /*链接中消除下划线*/
            text-decoration: none;
            color: #333;
            /*把行内元素 a 转换为块级元素，可加宽高*/
            width:150px;
            height:50px;
            background-color:#e4a6f1;
            display:block;
        }

        p {
            /*首行缩进,em相当于一个文字的间距*/
            text-indent: 2em;
            /*行间距*/
            line-height: 26px;
        }
    </style>
</head>
<body>
    <h1>1.选择器类型</h1>
    <ul>
        <li class="red">半生缘</li>
        <li class="red font">江南</li>
        <!-- 多类名使用，用空格隔开，可以把相同元素放到一个类选择器里面调用 -->
        <li id="blue">你真好看</li>
        <!-- id选择器只允许调用一次 -->
    </ul>
    <hr />
    <h1>2.字体样式</h1>
    <div>
        <span class="lianxi1">你真可爱！！！</span>
        <span class="lianxi2">你真可爱！！！</span>
    </div>
    <hr />
    <h1>3.文本样式</h1>
    <div class="lianxi3">居中对齐</div>
    <div class="lianxi4">下划线</div>
    <div class="lianxi5">删除线</div>
    <div><a href="前端练习html.html" target="_blank">这是一个链接，已消除下划线，可点击！</a></div>
    <div>
        <p>秋天，无论在什么地方的秋天，总是好的；可是啊，北国的秋，却特别地来得清，来得静，来得悲凉。我的不远千里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这“秋”，这故都的秋味。</p>
        <p>江南，秋当然也是有的，但草木凋得慢，空气来得润，天的颜色显得淡，并且又时常多雨而少风；一个人夹在苏州上海杭州，或厦门香港广州的市民中间，混混沌沌地过去，只能感到一点点清凉，秋的味，秋的色，秋的意境与姿态，总看不饱，尝不透，赏玩不到十足。秋并不是名花，也并不是美酒，那一种半开、半醉的状态，在领略秋的过程上，是不合适的</p>
    </div>

    <!-- css行内式 -->
    <div style="color: blue; font-size: 30px; ">
        秋天，无论在什么地方的秋天，总是好的
    </div>

    <!-- css外链式 -->
    <div class="css1">
        那一种半开、半醉的状态，在领略秋的过程上，是不合适的
    </div>

    <!-- Emmet语法 -->
    <!-- 生成多个标签：div*3 -->
    <div></div>
    <div></div>
    <div></div>
    <!--ul>li*4-->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!--.pia-->
    <div class="pia"></div>
    <!--#id-->
    <div id="id"></div>

    <!-- 复合选择器 ,在css文件中-->
    <hr />
    <h1>4.复合选择器</h1>
    <!-- 1.后代选择器 -->
    <div>
        <span>你真好看</span>
    </div>
    <ol class="nav">
        <li>我是ol的孩子</li>
        <li><a href="#">我是ol的孩子</a></li>
        <li>我是ol的孩子</li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>
    <!--子选择器,子类，孙子不选-->
    <div class="nav2">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
    <!--并集选择器-->
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪</li>
        <li>佩奇</li>
        <li>猪妈妈</li>
    </ul>
    <!--伪类选择器-->
    <div>
        <a href="前端练习html.html" target="_blank">未访问的链接</a>
    </div>
    <div>
        <form action="#" method="post">
            姓名：<input type="text" name="q" />
        </form>
    </div>
</body>
</html>